<script setup>
import { useRouter } from 'vue-router';
import useUserStore from '@/store/user';
import { onBeforeMount, onBeforeUnmount,  ref } from 'vue';

const router = useRouter();
const userStore = useUserStore()

// 文字转语音
const synth = window.speechSynthesis;
const msg = ref(new SpeechSynthesisUtterance());
const voices = window.speechSynthesis.getVoices();
const voice = voices[2];


const textBlind = ref("亲爱的盲人用户，欢迎使用“视界共享”平台！在这里，您可以上传图片，分享您对世界的独特见解和好奇心。我们的志愿者团队将竭诚为您提供帮助，让您通过他们的眼睛体验更多的精彩。我们相信，“视界共享”能够帮助您打破视觉障碍，探索更广阔的世界。感谢您的参与，让我们共同努力，构建一个更加包容和理解的社会！");

const playVoice = () => {
    msg.value = new SpeechSynthesisUtterance(); // 新建一个 SpeechSynthesisUtterance 对象
    handleSpeak(textBlind.value); // 传入需要播放的文字
};

const handleSpeak = (text) => {
    if (voice) {
        msg.value.voice = voice;
    }
    msg.value.text = text; // 文字内容
    msg.value.lang = "zh-CN"; // 使用的语言：中文
    msg.value.volume = 10; // 声音音量：1
    msg.value.rate = 1; // 语速：1
    msg.value.pitch = 1; // 音高：1
    synth.speak(msg.value); // 播放
};

const handleStop = (e) => {
    msg.value.text = e;
    synth.cancel(msg.value);
};

// 在 onMounted 生命周期钩子中调用 playVoice 函数
onBeforeMount(() => {
    if (userStore.userInfo.types == 0)
        playVoice();
});

onBeforeUnmount(() => {
    if (userStore.userInfo.types == 0)
        handleStop();
});

</script>

<template>
    <div>
        <van-nav-bar title="视界共享" left-text="返回" left-arrow @click="router.go(-1)" />
        <div class="learn-call-phone">
            <img src="../../assets/community.png" alt="社区图片">
            <!-- 盲人用户界面 -->
            <div v-if="userStore.userInfo.types == 0">
                {{ textBlind }}
            </div>
            <div v-else>
                亲爱的志愿者，欢迎加入“视界共享”平台！在这里，您将有机会成为盲人用户的引路人，帮助他们理解和感受世界的多彩。<br />
                通过您的描述和陪伴，盲人用户将能够“看见”更多，而您也将体验到与不同背景的人交流的乐趣。感谢您的无私奉献，让我们携手，为社会的包容与理解贡献力量！
            </div>
        </div>
    </div>


</template>

<style scoped>
.learn-call-phone {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 50px;
}

img {
    width: 80%;
    height: 300px;
    object-fit: cover;
}

.learn-call-phone div {
    margin-top: 20px;
    padding: 0 10px;
    text-align: center;
    font-size: 16px;
    line-height: 24px;
    color: #333;
    background-color: #cccccc21;
}
</style>